<template>
  <div class="c-p">
    <div class="c-p c-w100 c-maxw640">
      <div class="c-maxw640 c-w100 c-hh350 c-text-hidden">
        <div :style="'background-color:' + themeColor[themeIndex].color1" class="circle flex-row justify-sb aligni-center"></div>
      </div>
      <img class="c-hh280 c-w100 c-pa c-p-t0 c-pz1" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/vip/vip-ornament-bg.png"
        alt="">
      <div class="c-pa c-p-t60 c-p-lp50 c-pz10 c-translate-x-50 c-ww592 c-hh300 c-br20">
        <div class="c-w100 c-h c-p c-pv30" :style="'color:' + themeColor[themeIndex].color5">
          <img class="c-w100 c-h c-pa c-p-t0 c-pz-1 c-br20" :src="vipConf.cardBackgroundImg || 'https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/b682fdf8/admin-fe_lj7l_material_k2hX5GPBTQwixK67HxSS.png'" alt="">
          <!-- 非会员 -->
          <template v-if="showVipType == 1 || showVipType == 2">
            <div class="c-fs48 c-fw600 c-ph24">{{vipConf.name}}</div>
            <div class="c-fs28 c-pl24 c-mt40 c-ww360 c-lh40">{{vipConf.subtitle}}</div>
          </template>
          <div v-else class="c-pv20 c-ph30 c-flex-row c-justify-sb">
            <img class="c-hh88 c-ww88 c-brp50 c-flex-shrink0 c-mr20" :src="userInfo.headimgurl || require('@/assets/defult_head.png')" alt="">
            <div class="c-flex-grow1 c-text-ellipsis1">
              <div class="c-fs28 c-fw600 c-text-ellipsis1">{{userInfo.nickname || ''}}</div>
              <div v-if="curVipType == 3 || curVipType >= 5" class="c-fs24 c-mt30">您已享受{{custServiceName}}特权</div>
              <template v-else>
                <div class="c-fs24 c-mt30" v-if="isVip">您已是{{type == 1 ? 'VIP' : 'SVIP'}}会员</div>
                <div class="c-fs24 c-mt20">{{showVipTimeStr()}}</div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="isNoTip && isNoThroughLinePrice ? 'c-hh210' : 'c-hh240'" class="c-mt30 c-w100 c-contexty-hidden c-contextX-scroll c-flex-row c-pl24 c-pt20">
      <div class="c-flex-shrink0 c-pr20" v-for="(item, index) in vipList" :key="index" @click="chooseVIP(index)">
        <div :style="itemStyle(index)" :class="isNoTip ? isNoThroughLinePrice ? 'c-hh160' : 'c-hh180' : 'c-hh192'" class="c-pt30 c-ww180 c-br12 c-flex-column c-aligni-center c-p">
          <div class="c-fs26 c-fc-sblack c-fw600 c-ph10 c-w100 c-text-ellipsis1 c-textAlign-c">{{item.name}}</div>
          <div :style="'color:' + themeColor[themeIndex].color7" class="c-fs26 c-mt10 c-lh40">¥<span class="c-fw600"><span :class="getNumberStr(getShowPrice(item), 0) > 10000 ? 'c-fs30' : 'c-fs40'">{{getNumberStr(getShowPrice(item), 0)}}</span>{{getNumberStr(getShowPrice(item), 1)}}</span></div>
          <!-- 划线价格 -->
          <div v-if="throughLinePrice(item) >= 0" class="c-mt2 c-fc-gray c-fs20 c-text-decoration-through c-lh22">¥{{throughLinePrice(item)}}</div>
          <!-- 立省几元、每天约几元 -->
          <div v-if="isShowBottomTip(item)" class="c-pa c-p-b0 c-p-b-1px c-p-l-1px c-ww180 c-hh34 c-flex-row c-flex-center c-fc-white c-fs20 c-br-bl12 c-br-br12" :style="'background-color:' + themeColor[themeIndex].color2">
            <!-- 活动价、新人价立省 -->
            <span v-if="vipConf.isShowReduce == 1 && ((vipDetail.isNewUser && item.newUserPrice) || item.isOnSales) && item.price">立省¥{{getPriceDifference(item.price, getShowPrice(item))}}</span>
            <span v-else-if="vipConf.isShowReduce == 1 && item.marketPrice && Number(item.marketPrice)">立省¥{{getPriceDifference(item.marketPrice, getShowPrice(item))}}</span>
            <!--每天-->
            <span v-else-if="item.duration > 0 && vipConf.isShowDayPrice == 1">约{{'¥' | iosPriceFilter}}{{getDayPrice(item)}}</span>
          </div>
          <div v-if="getPriceType(item)" class="item-tip c-flex-row c-flex-center c-fc-white c-fs20"> {{getPriceTag(item)}}</div>
        </div>
      </div>
    </div>
    <div class="c-w100 c-hh20 c-bg-sgray c-mt12" v-if="equityTabList && equityTabList.length"></div>
    <div class="c-pl24 c-pt20" v-if="equityTabList && equityTabList.length">
      <my-small-tabbar :tabList="equityTabList" :flexClass="''" :isScroll="true" :tabNameClass="'c-fw600 c-fs28'" :fontSet="{defaultColor: 'c-fc-sblack'}"
        :tabActiveStyle="'background-color:' + themeColor[themeIndex].color7 + ';opacity: 0.5;'" :tabNameActiveStyle="'color:' + themeColor[themeIndex].color7" :tabIndex="equityTabIndex"
        @changeTab="changeType"></my-small-tabbar>
    </div>
    <!-- 会员介绍 -->
    <div v-show="equityTabIndex == 0" class="c-ph24 c-pb40">
      <course-description ref="vipEquityDetail"></course-description>
    </div>
    <!-- 会员权益 -->
    <div v-if="equityTabIndex == 1" class="c-ph24 c-pb40">
      <div v-if="!isiOSApp" class="c-mt24">
        <div class="c-flex-row c-flex-shrink0 c-mt20" v-for="(item,index) in vipEquity" v-if="item.description && item.description.trim().length > 0" :key="index">
          <span class="c-fs24 c-fc-gray c-lh40">{{index+1+'、'+item.description}}</span>
        </div>
      </div>
      <div v-else class="c-mt24 c-fs24 c-fc-gray c-lh40">
        {{type == 1 ? '开通VIP，可免费学VIP免费课程，预计占平台总课程的50%':'开通SVIP，可免费学VIP免费和SVIP免费课程，预计占平台总课程的90%'}}
      </div>
    </div>
    <!-- 赠送礼包 -->
    <div v-if="equityTabIndex == 2 && !isiOS && !isRecommendToBuy" class="c-ph24 c-pb40">
      <free-good-com :themeColorObj="themeColor[themeIndex]" :isFreeGood="isFreeGood" :vipList="vipList" :selectedIndex="selectedIndex" :getPoint="getPoint" :getCouponCount="getCouponCount"></free-good-com>
    </div>
    <vip-hot-list v-if="vipConf && vipConf.isShowFreeProd == 1 && vipHotList && vipHotList.length" :type="type" :vipConf="vipConf" :vipHotList="vipHotList" :themeColor7="themeColor[themeIndex].color7"></vip-hot-list>
    <div class="c-w100 c-hh20 c-bg-sgray" v-if="vipConf && vipConf.instruction"></div>
    <div class="c-pv40 c-ph24" v-if="vipConf && vipConf.instruction">
      <div :style="'color:' + themeColor[themeIndex].color7" class="c-fs28 c-fw600 c-lh40">使用须知</div>
      <div class="c-mt10 c-fs24 c-fc-gray c-lh44" v-html="vipConf.instruction"></div>
    </div>
    <div class="c-w100 c-pb100"></div>
    <div class="c-w100 c-maxw640 c-bg-white c-pf c-pz100 c-p-b0 c-hh100 c-box-shadowEdu c-flex-row c-flex-center c-ph24">
      <!-- <div v-if="showVipShare" @click="inviteFriends" class="c-fc-xblack c-flex-column c-aligni-center c-justify-sb c-hh64 c-mr32 c-flex-shrink0">
        <div class="iconfont c-textAlign-c c-lh40 c-fs40">&#xe7b2;</div>
        <span class="c-fs20">分享好友</span>
      </div> -->
      <div v-if="curVipType == 3 || curVipType >= 5" class="c-flex-grow1 c-flex-row c-flex-center c-br40 c-hh76 c-fs32 c-fw600" :style="'background-color:' + themeColor[themeIndex].color6 + ';color:' + themeColor[themeIndex].color5">
        您已享受{{custServiceName}}特权
      </div>
      <div class="c-hh76 c-fs32 c-fw700 c-br40 c-flex-row c-flex-center c-fc-white c-bg-ccc c-w100" v-else-if="type==1 && userInfo.vipEndTime && userInfo.vipEndTime.split(' ')[0]=='9999-12-31'">您已是长期会员</div>
      <div class="c-hh76 c-fs32 c-fw700 c-br40 c-flex-row c-flex-center c-fc-white c-bg-ccc c-w100" v-else-if="type==23 && userInfo.svipEndTime && userInfo.svipEndTime.split(' ')[0]=='9999-12-31'">您已是长期会员</div>
      <div v-else @click="clickVipBuy" class="c-flex-grow1 c-flex-row c-flex-center c-br40 c-hh76 c-fs32 c-fw600" :style="'background-color:' + themeColor[themeIndex].color6 + ';color:' + themeColor[themeIndex].color5">
        立即{{(curVipType == 2 && type == 1) || (curVipType == 4 && type == 23) ? '续费' : '开通'}}
      </div>
    </div>
    <promote-income v-if="showVipShare" :showInvitionCard="showVipShare" :needGetProfit="false" @goInvite="inviteFriends"></promote-income>
  </div>
</template>

<script>
import { reportPageViewByBtn } from "@/utils/userTraceLog.js";
import { utilJs } from "@/utils/common.js";
import { checkEnableModule } from "@/utils/checkEnableModuleUtil.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import courseDescription from '@/components/templates/courseDescription';
import freeGoodCom from '@/components/templates/vip/freeGoodCom';
import vipHotList from '@/components/templates/vip/vipHotList';
import PromoteIncome from '@/components/templates/common/promoteIncome.vue';
export default {
  name: "VipDetail",
  components: {
    MySmallTabbar,
    courseDescription,
    freeGoodCom,
    vipHotList,
    PromoteIncome
  },
  beforeCreate() { },
  data() {
    return {
      isiOSApp: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1, // 是否是ios app
      cfrom: global.ckFrom,
      themeColor: [{
        color1: 'rgba(142, 86, 41, 1)', // 背景色
        color2: 'rgba(231, 181, 127, 1)', // 规格选中边框
        color3: 'rgba(255, 244, 237, 1)', // 规格底色
        color4: 'rgba(220, 155, 84, 0.2)', // 规格外阴影
        color5: 'rgba(142, 86, 41, 1)', // 卡片、按钮字体颜色
        color6: 'rgba(247, 211, 173, 1)', // 按钮色
        color7: 'rgba(142, 86, 41, 1)', // 规格、tab字体颜色
      }, {
        color1: 'rgba(35, 28, 28, 1)', // 背景色
        color2: 'rgba(72, 70, 70, 1)', // 规格选中边框
        color3: 'rgba(242, 242, 241, 1)', // 规格底色
        color4: 'rgba(102, 102, 102, 0.2)', // 规格外阴影
        color5: 'rgba(255, 220, 153, 1)', // 卡片、按钮字体颜色
        color6: 'rgba(72, 70, 70, 1)', // 按钮色
        color7: 'rgba(35, 28, 28, 1)', // 规格、tab字体颜色
      }, {
        color1: 'rgba(24, 39, 64, 1)', // 背景色
        color2: 'rgba(121, 142, 195, 1)', // 规格选中边框
        color3: 'rgba(245, 248, 255, 1)', // 规格底色
        color4: 'rgba(121, 142, 195, 0.2)', // 规格外阴影
        color5: 'rgba(24, 39, 64, 1)', // 卡片、按钮字体颜色
        color6: 'rgba(199, 209, 234, 1)', // 按钮色
        color7: 'rgba(24, 39, 64, 1)', // 规格、tab字体颜色
      }, {
        color1: 'rgba(16, 125, 67, 1)', // 背景色
        color2: 'rgba(44, 185, 111, 1)', // 规格选中边框
        color3: 'rgba(228, 255, 241, 1)', // 规格底色
        color4: 'rgba(44, 185, 111, 0.2)', // 规格外阴影
        color5: 'rgba(255, 255, 255, 1)', // 卡片、按钮字体颜色
        color6: 'rgba(34, 135, 81, 1)', // 按钮色
        color7: 'rgba(34, 135, 81, 1)', // 规格、tab字体颜色
      }, {
        color1: 'rgba(58, 9, 153, 1)', // 背景色
        color2: 'rgba(116, 40, 226, 1)', // 规格选中边框
        color3: 'rgba(244, 239, 255, 1)', // 规格底色
        color4: 'rgba(139, 108, 255, 0.2)', // 规格外阴影
        color5: 'rgba(255, 255, 255, 1)', // 卡片、按钮字体颜色
        color6: 'rgba(116, 40, 226, 1)', // 按钮色
        color7: 'rgba(116, 40, 226, 1)', // 规格、tab字体颜色
      }, {
        color1: 'rgba(0, 71, 225, 1)', // 背景色
        color2: 'rgba(51, 116, 255, 1)', // 规格选中边框
        color3: 'rgba(230, 245, 255, 1)', // 规格底色
        color4: 'rgba(51, 116, 255, 0.2)', // 规格外阴影
        color5: 'rgba(255, 255, 255, 1)', // 卡片、按钮字体颜色
        color6: 'rgba(26, 103, 255, 1)', // 按钮色
        color7: 'rgba(26, 103, 255, 1)', // 规格、tab字体颜色
      }, {
        color1: 'rgba(165, 43, 16, 1)', // 背景色
        color2: 'rgba(232, 83, 58, 1)', // 规格选中边框
        color3: 'rgba(255, 242, 240, 1)', // 规格底色
        color4: 'rgba(232, 83, 58, 0.2)', // 规格外阴影
        color5: 'rgba(255, 237, 206, 1)', // 卡片、按钮字体颜色
        color6: 'rgba(232, 83, 58, 1)', // 按钮色
        color7: 'rgba(232, 83, 58, 1)', // 规格、tab字体颜色
      }],
      originalEquityTabList: [{
        title: '会员介绍',
        index: 0,
      }, {
        title: '会员权益',
        index: 1,
      }, {
        title: '赠送礼包',
        index: 2,
      }],
      // 推荐有礼(目前这个页面没有参加推荐有礼)
      recommendArr: [],
      recType: 0,
      recRelateId: "", //推荐人ID
      recommend: null,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      equityTabList: [],
      themeIndex: 0, // 主题
      vipDetail: {}, // 会员详情
      type: 1, // 当前会员卡的vip类型
      curVipType: 1, // 当前用户的vip类型
      userInfo: {}, // 当前用户信息
      vipConf: {}, // 会员卡信息
      vipList: [], // 规格列表
      selectedIndex: 0, // 选中的规格
      equityTabIndex: 0, // 会员介绍、会员权益、赠送礼包
      vipEquity: [], // 会员权益
      vipEquityDetail: [], // 会员介绍
      isRecommendToBuy: false, //被推荐购买会员，隐藏可获取积分和优惠券
      getPoint: 0, //可获取的积分数
      getCouponCount: 0, //可获取的优惠券数
      isFreeGood: 0, // 是否赠送实物商品
      vipHotList: [], // 专享0元好课
      cmpId: null, //当前选中的VIP种类ID
      isVipReNew: 0, //是否属于VIP续费
      isSetRenew: 0,
      showVipShare: false, // 是否开启邀请卡
      custServiceName: '服务商',
      showVipType: 1,
      isOpenIosGzhPay: utilJs.isOpenIosGzhPay('1'),
      fromCmpId: ''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
    $route: function (to, from) {
      if (to.path.includes('/vip/vipDetail') && to.query && to.query.type != this.type) {
        this.initData();
      }
    }
  },
  mounted() {
    setDocumentTitle("会员详情")
    this.initData()
  },
  computed: {
    // 是否所有规格都没有下角标
    isNoTip() {
      let vipList = this.vipList;
      let isShow = false;
      if (vipList && vipList.length) {
        for (let i = 0; i < vipList.length; i++) {
          if (this.isShowBottomTip(vipList[i])) {
            isShow = true;
            break;
          }
        }
      }
      return !isShow
    },
    // 是否所有规格都没有划线价格
    isNoThroughLinePrice() {
      let vipList = this.vipList;
      let isShow = false;
      if (vipList && vipList.length) {
        for (let i = 0; i < vipList.length; i++) {
          if (this.throughLinePrice(vipList[i]) >= 0) {
            isShow = true;
            break;
          }
        }
      }
      return !isShow
    },
    isVip() {
      let type = this.type == 1 ? 'vip' : 'svip'
      if ((this.userInfo && this.userInfo[type + 'EndTime'] && this.userInfo[type + 'EndTime'].split(' ')[0] == '9999-12-31') || (this.userInfo && this.userInfo[type + 'EndTime'] && this.userInfo[type + 'IsOverDue'] == 0)) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    showVipTimeStr() {
      let str = '';
      if (this.type == 1 && this.userInfo && !this.userInfo.vipEndTime) {
        //vipEndTime 为空则未开通vip
        str = '您当前未开通VIP会员';
        this.showVipType = 1;
      } else if (this.type == 23 && this.userInfo && !this.userInfo.svipEndTime) {
        str = '您当前未开通SVIP会员';
        this.showVipType = 2;
      } else if (this.type == 1 && this.userInfo && this.userInfo.vipEndTime && this.userInfo.vipEndTime.split('-')[0] >= '9900') {
        //vipEndTime 为9999-12-31 为永久有效 或者 超过9900年
        str = '长期有效';
        this.showVipType = 3;
      } else if (this.type == 23 && this.userInfo && this.userInfo.svipEndTime && this.userInfo.svipEndTime.split('-')[0] >= '9900') {
        str = '长期有效';
        this.showVipType = 4;
      } else if (this.type == 1 && this.userInfo && this.userInfo.vipEndTime && this.userInfo.vipIsOverDue == 1) {
        //vipIsOverDue 1 过期，0 是未过期
        str = '已过期';
        this.showVipType = 5;
      } else if (this.type == 23 && this.userInfo && this.userInfo.svipEndTime && this.userInfo.svipIsOverDue == 1) {
        str = '已过期';
        this.showVipType = 6;
      } else if (this.type == 1 && this.userInfo && this.userInfo.vipEndTime && this.userInfo.vipIsOverDue == 0) {
        str = `有效期至：${this.userInfo.vipEndTime}`;
        this.showVipType = 7;
      } else if (this.type == 23 && this.userInfo && this.userInfo.svipEndTime && this.userInfo.svipIsOverDue == 0) {
        str = `有效期至：${this.userInfo.svipEndTime}`;
        this.showVipType = 8;
      }
      return str;
    },
    // 获取每日几元
    getDayPrice(item) {
      let days = Number(item.durationDays);
      return (Number(item.price || 0) / days).toFixed(2) + '/天';
    },
    // 划线价格
    throughLinePrice(item) {
      let price = -1;
      if ((this.vipDetail.isNewUser && item.newUserPrice) || item.isOnSales) {
        price = item.price
      } else if (item.marketPrice && Number(item.marketPrice)) {
        price = item.marketPrice
      }
      return price
    },
    // 是否展示规格底部立省几元、每日几元的标签
    isShowBottomTip(item) {
      return (this.vipConf.isShowReduce == 1 && ((this.vipDetail.isNewUser && item.newUserPrice) || item.isOnSales || (item.marketPrice && Number(item.marketPrice)))) || (item.duration > 0 && this.vipConf.isShowDayPrice == 1)
    },
    //邀请好友
    inviteFriends: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      //把课程类型放到extId里面，目的是为了邀请卡的分享链接地址
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadCustom', query: {extId: 0, ckFrom: this.type, cmpId: this.vipList[this.selectedIndex].cmpId} });
    },
    chooseVIP(index = 0) {
      let item = this.vipList[index]
      this.selectedIndex = index;
      //选中规格的时候上报当前规格浏览事件
      reportPageViewByBtn({prodId:item.cmpId, prodType:this.type});
      this.cmpId = item.cmpId;
      this.getPoint = item.points;
      this.getCouponCount = item.coupons && item.coupons.length;
      this.isVipReNew = item.isRenew;
      this.isSetRenew = item.isRenew
      this.vipEquity = item.equityList || [];
      this.isFreeGood = item.isFreeGood || 0
      this.equityTabList = []
      if (this.vipEquityDetail && this.vipEquityDetail.length) {
        this.equityTabList.push(this.originalEquityTabList[0])
        this.$nextTick(() => {
          this.$refs.vipEquityDetail.getDescriptInfo(this.vipEquityDetail ? this.vipEquityDetail : []);
        })
      }
      if (this.vipEquity && this.vipEquity.length) {
        this.equityTabList.push(this.originalEquityTabList[1])
      }
      if (this.isFreeGood || this.getPoint || this.getCouponCount) {
        this.equityTabList.push(this.originalEquityTabList[2])
      }
      this.equityTabIndex = this.equityTabList[0] ? this.equityTabList[0].index : -1;
      this.pId = item.isOnSales ? item.sales.pId : null;
    },
    // 计算差价
    getPriceDifference(originalPrice, discountedPrice) {
      let diff = Number(originalPrice) - Number(discountedPrice)
      return diff > 0 ? diff.toFixed(2) : 0
    },
    // 计算几折
    getDiscountTag(price, oldPrice) {
      if (!oldPrice || !price) {
        return ''
      }
      let dis = (Number(price) / Number(oldPrice) * 10).toFixed(1) + '';
      if (dis && dis.split('.')[1] == 0) { // 小数点后为0，则取整数部分
        dis = dis.split('.')[0];
      }
      return dis + '折';
    },
    // 规格：当前显示的价格标签
    getPriceTag(item) {
      let tag = ''
      let priceType = this.getPriceType(item)
      let showPrice = this.getShowPrice(item)
      let salesTag = item.sales && item.sales.sales && item.sales.sales.tag && String(item.sales.sales.tag).length < 6 ? item.sales.sales.tag : (priceType == 1 && Number(showPrice) == 0 ? '限时免费' : '限时折扣')
      tag = priceType == 1 ? salesTag : priceType == 2 ? '新用户价' : priceType == 3 ? '续费' : ''
      tag = tag && priceType != 2 ? (tag + this.getDiscountTag(showPrice, item.price)) : tag
      return tag
    },
    // 规格：当前显示的价格类型
    getPriceType(item) {
      let renewPrice = item.isRenew == 1 && item.duration > 0 ? Number((item.renewRate * item.price / 100).toFixed(2)) : -1; // 续费价
      let priceType = 0; // priceType 0购买价 1活动价 2新人价 3续费价
      if (item.isOnSales) {
        priceType = 1;
      } else if (this.vipDetail.isNewUser && item.newUserPrice) {
        priceType = 2;
      } else {
        priceType = renewPrice > 0 && renewPrice < item.price ? 3 : 0;
      }
      return priceType
    },
    // 规格：应该展示的总价:活动价>新人价>续费价>购买价
    getShowPrice(item) {
      let renewPrice = item.isRenew == 1 && item.duration > 0 ? Number((item.renewRate * item.price / 100).toFixed(2)) : -1; // 续费价
      if (item.isOnSales) {
        return item.sales.price;
      } else if (this.vipDetail.isNewUser && item.newUserPrice) {
        return item.newUserPrice;
      } else {
        return renewPrice > 0 && renewPrice < item.price ? renewPrice : item.price;
      }
    },
    async initData() {
      this.equityTabList = [],
      this.themeIndex = 0; // 主题
      this.vipDetail = {}; // 会员详情
      this.curVipType = 1; // 当前用户的vip类型
      this.userInfo = {}; // 当前用户信息
      this.vipConf = {}; // 会员卡信息
      this.vipList = []; // 规格列表
      this.selectedIndex = 0; // 选中的规格
      this.equityTabIndex = -1; // 会员权益、会员介绍、赠送礼包
      this.vipEquity = []; // 会员权益
      this.vipEquityDetail = []; // 会员介绍
      this.isRecommendToBuy = false; //被推荐购买会员，隐藏可获取积分和优惠券
      this.getPoint = 0; //可获取的积分数
      this.getCouponCount = 0; //可获取的优惠券数
      this.isFreeGood = 0; // 是否赠送实物商品
      this.vipHotList = []; // 专享0元好课
      this.cmpId = null; //当前选中的VIP种类ID
      this.isVipReNew = 0; //是否属于VIP续费
      this.isSetRenew = 0;
      this.goodsRoomId = this.$route.query.goodsRoomId || '';
      this.fromCmpId = this.$route.query.fromCmpId ? Number(this.$route.query.fromCmpId) : '';
      let customName = localStorage.getItem("customName") ? JSON.parse(localStorage.getItem("customName")) : null;
      this.custServiceName = customName ? customName.serviceProviderName : '服务商';
      this._ptFrom = this.$route.query.type || 1
      let ckFrom = null;
      if (this._ptFrom == this.cfrom.vip || this._ptFrom == this.cfrom.svip) {
        ckFrom = this.cfrom.vip;
      } else if (this._ptFrom == this.cfrom.presentVip || this._ptFrom == this.cfrom.presentSvip) {
        ckFrom = this.cfrom.vip; //赠送会员在提交订单时区分
      } else if (this._ptFrom == this.cfrom.collageVip || this._ptFrom == this.cfrom.collageSvip) {
        ckFrom = this.cfrom.collageVip;
      } else if (this._ptFrom == this.cfrom.flashSalesVip || this._ptFrom == this.cfrom.flashSalesSvip) {
        ckFrom = this.cfrom.flashSalesVip;
      } else if (this._ptFrom == this.cfrom.flashSalesPresentVip || this._ptFrom == this.cfrom.flashSalesPresentSvip) {
        ckFrom = this.cfrom.flashSalesVip;
      }
      if (!checkEnableModule(ckFrom, this)) {
        return;
      }
      if (this._ptFrom == this.cfrom.vip ||
        this._ptFrom == this.cfrom.presentVip ||
        this._ptFrom == this.cfrom.collageVip ||
        this._ptFrom == this.cfrom.flashSalesVip ||
        this._ptFrom == this.cfrom.flashSalesPresentVip) {
        this.type = 1;
      } else {
        this.type = 23;
      }
      await this.getVIPInfo();
      this.getEquityDetail();
      this.getVipHot();
      this.showVipTimeStr();
      getBindPhoneSetting(global.ckFrom.vip).then(res => {
        this.bindPhoneSetting = res;
      });
    },
    // 数据初始化
    getVIPInfo() {
      return new Promise( (resolve, reject) => {
        utilJs.getMethod(global.apiurl + "members/vipUpPage?type=" + (this.type == 1 ? 1 : 2), (res) => {
          this.vipDetail = res;
          if (this.type != 1 && (!res.enableSvipModule || !(res.vipList && res.vipList.length))) { // svip没开或者没规格，就自动跳到vip
            this.$routerGo(this, "replace", { path: "/member/vip/vipDetail" });
            return
          }
          this.userInfo = res.userInfo || {};
          this.curVipType = this.userInfo.vipType || 1;
          this.vipConf = res.conf || {};
          this.vipList = res.vipList || [];
          this.themeIndex = res.conf && res.conf.backcolor ? (Number(res.conf.backcolor) - 1) : 0;
          this.showVipShare = res.showVipShare || false;
          for (let i = 0; i < this.vipList.length; i++) {
            if (this.vipList[i].sales && this.vipList[i].sales.status && (this.vipList[i].sales.limit == 0 || this.vipList[i].sales.balance > 0) && this.companyAuth.enableFlashSalesModule == 1) { //若是限时购，则把价格设置成限时购的价格
              let nt = (new Date()).getTime();
              let st = utilJs.getTimeByDate(this.vipList[i].sales.sales.startTime);
              let et = utilJs.getTimeByDate(this.vipList[i].sales.sales.endTime);
              if (nt >= st && nt < et && this.vipList[i].sales.sales.status > -1) {
                this.vipList[i].sales.sales.status = 2;
                this.vipList[i].isOnSales = true; //可以使用限时购
              } else if (nt < st && this.vipList[i].sales.sales.status == 1) {
                this.vipList[i].sales.sales.status = 1;
                this.vipList[i].isOnSales = false;
              } else if (nt >= et && this.vipList[i].sales.sales.status == 2) {
                this.vipList[i].sales.sales.status = -1;
                this.vipList[i].isOnSales = false;
              } else {
                this.vipList[i].isOnSales = false;
              }
            }
          }
          if (this.fromCmpId) {
            let fromIndex = this.vipList.findIndex(element => element.cmpId == Number(this.fromCmpId))
            this.chooseVIP(fromIndex == -1 ? 0 : fromIndex)
          } else {
            this.chooseVIP(0)
          }
          this.getUseInstruction();
          this._shareSetting = res.shareSetting || {};
          this.wechatShare()
          resolve()
        }, failRes => {
          resolve()
        });
      })
    },
    getUseInstruction() {
      if (this.vipConf && this.vipConf.instruction) {
        utilJs.getPageHtml(this.vipConf.instruction, (res) => {
          this.vipConf.instruction = res
        })
      }
    },
    // 点击购买按钮
    clickVipBuy() {
      if (localStorage.getItem('isWxAppIos')) {
        utilJs.miniProgramGoTo('push', "/pages/member/contact/index")
        return
      }
      if (!utilJs.isOpenIosGzhPay('23')) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      if (!this.cmpId) {
        return;
      }
      // 判断体验版是否到期，到期之后不可购买商品
      if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
      if (this.recType == 3 && this.recRelateId && this.recommend.isExist && (this.refereeId == localStorage.getItem("userId"))) {
        this.$showCjToast({
          text: "不能邀请自己支付",
          type: "warn",
          time: 1500
        });
        return
      }
      if (this.type == 23 && this.companyAuth && this.companyAuth.enableSvipModule != 1) {
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
        let goPath = this.goodsRoomId ? {goodsRoomId: this.goodsRoomId} : '';
        if (utilJs.goBindMobile({goPath})) return;
      }
      let type = null;
      // 根据是VIP或SVIP和是否赠送是否限时购判断type
      if (this.pId) { //限时购
        type = this.type == 1 ? this.cfrom.flashSalesVip : this.cfrom.flashSalesSvip;
      } else { //非限时购
        type = this.type == 1 ? this.cfrom.vip : this.cfrom.svip;
      }
      if (this.isiOSApp) {
        //ios的游客身份
        this.$routerGo(this, "replace", { path: '/homePage/course/iosRecharge', query: { from: 1 } });
        return;
      }
      let goPathQuery = {
        prodId: this.cmpId,
        type: type,
        pId: this.pId || '',
        recRelateId: this.recommend && this.recommend.isExist ? this.recRelateId : '',
        recType: this.recommend && this.recommend.isExist ? this.recType : '',
      };
      if (this.recommend && this.recommend.isExist && this.refereeId != '') {
        goPathQuery.refereeId = this.refereeId;
      }
      if (this.goodsRoomId) {
        goPathQuery.goodsRoomId = this.goodsRoomId;
      }
      if (this.$route.query.fromCoursePay) { //从课程支付页跳转到会员升级，会员升级完成后需要跳回课程详情
        goPathQuery.fromCoursePay = 1;
      }
      this.$routerGo(this, "push", { path: "/member/vip/vipBuy", query: goPathQuery });
    },
    //获取专享0元好课
    getVipHot() {
      utilJs.getMethod(`${global.apiurl}Marketing/vip/getFreeList?vipType=${this.type}`, (res) => {
        this.vipHotList = res;
      });
    },
    //会员介绍
    getEquityDetail() {
      utilJs.getMethod(global.apiurl + "Marketing/vip/getEquityDetail?prodType=" + this.type, res => {
        this.vipEquityDetail = res;
        if (this.vipEquityDetail && this.vipEquityDetail.length) {
          this.equityTabList = [...[this.originalEquityTabList[0]], ...this.equityTabList]
        }
        this.$nextTick(() => {
          if (this.$refs.vipEquityDetail) {
            this.$refs.vipEquityDetail.getDescriptInfo(this.vipEquityDetail ? this.vipEquityDetail : []);
          }
          this.equityTabIndex = this.equityTabList[0] ? this.equityTabList[0].index : -1
        })
      })
    },
    changeType(index) {
      this.equityTabIndex = index;
    },
    getNumberStr(num, type = 0) { // type 0整数部分 1小数部分（包含小数点）
      if (!num || !(num + '')) {
        return
      }
      let numStr = (num + '').split('.')[type] || (type == 1 ? '00' : '')
      return (type ? '.' : '') + numStr
    },
    itemStyle(index) {
      let activeStyle = `border: 1px solid ${this.themeColor[this.themeIndex].color2};background-color: ${this.themeColor[this.themeIndex].color3};box-shadow: 0 0.2rem 0.4rem 0 ${this.themeColor[this.themeIndex].color4}`
      let commonStyle = `border: 1px solid rgba(232, 232, 232, 1);`
      return this.selectedIndex == index ? activeStyle : commonStyle
    },
    //分享
    wechatShare: function () {
      let shareSetting = this._shareSetting || {}
      let title = shareSetting.shareTitle || '';
      let shareImg = shareSetting.sharePic || '';
      let shareDesc = shareSetting.shareDesc || '';
      let connectorStr = this.$route.fullPath.includes('?') ? '&' : '?';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.fullPath}${connectorStr}refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let shareSetting = this._shareSetting || {}
      let title = shareSetting.shareTitle || '';
      let shareImg = shareSetting.sharePic || '';
      let shareDesc = shareSetting.shareDesc || '';
      let connectorStr = this.$route.fullPath.includes('?') ? '&' : '?';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.fullPath}${connectorStr}refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  activated() {
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.circle {
  width: 140%;
  height: 8.7rem;
  border-radius: 50%;
  margin-left: -20%;
  margin-top: -1.7rem;
}
.c-p-l-1px {
  left: -1px;
}
.c-p-b-1px {
  bottom: -1px
}
.item-tip {
  /* width: 2.6rem; */
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  height: 0.8rem;
  background-image: linear-gradient(90deg, #23232f 0%, #4e4e5c 100%);
  border-radius: 0.4rem 0.1rem 0.4rem 0.1rem;
  position: absolute;
  left: 0;
  top: -0.4rem;
}
.box-shadow {
  box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.5);
}
</style>
